<template>
  <div class="device-data-command">
    <el-card>
      <!-- 设备数据管理页面 -->
      <el-row
        type="flex"
        justify="start">
        <el-date-picker
          v-model="searchParams.startDate"
          type="date"
          :editable="false"
          placeholder="开始日期"
          :picker-options="pickerOption0"
          format="yyyy-M-dd"
          value-format="yyyy-M-dd"
        />
        <span style="line-height: 36px;">~</span>
        <el-date-picker
          v-model="searchParams.endDate"
          type="date"
          :editable="false"
          placeholder="结束日期"
          format="yyyy-M-dd"
          value-format="yyyy-M-dd"
          :picker-options="pickerOption1"
        />
        <el-input
          class="sn8"
          v-model="searchParams.sn8"
          placeholder="输入sn8搜索"/>
        <el-button
          type="primary"
          @click="handleSearch">搜索</el-button>
      </el-row>
      <content>
        <el-row :gutter="40">
          <el-col :span="12">
            <CommonTable
              ref="runmode"
              is-standard-data
              :table-head="[ { label: '功能', prop: 'runModeC' }, { label: '使用次数', prop: 'frequency' } ]"
              :search-params="searchParams"
              :set-total="setTotal"
              url="/devices/runmode/frequency"
              http-type="get"
              title="功能使用数据："
            />
          </el-col>
          <el-col :span="12">
            <CommonTable
              ref="menu"
              is-standard-data
              :table-head="[ { label: '菜单', prop: 'menu_name' }, { label: '使用次数', prop: 'frequency' } ]"
              :search-params="searchParams"
              :set-total="setTotal"
              url="/devices/menu/frequency"
              http-type="get"
              title="菜单使用数据："
            />
          </el-col>
          <el-col :span="12">
            <CommonTable
              ref="runtime"
              is-standard-data
              :table-head="[ { label: '时间段', prop: 'runtime' }, { label: '平均工作时间 / 秒', prop: 'worktime' } ]"
              :search-params="searchParams"
              :set-total="setTotal"
              url="/devices/device/runtime"
              http-type="get"
              title="每天运作时段："
            />
          </el-col>
        </el-row>
        <!-- <el-button @click="test">test</el-button> -->
      </content>
    </el-card>
  </div >
</template>

<script>
import CommonTable from '../app/components/CommonTable'

export default {
  components: { CommonTable },
  data () {
    return {
      // 搜索条件
      searchParams: {
        startDate: '2016-2-3',
        endDate: '2020-8-8',
        sn8: '',
        page: 1,
        limit: 10
      },
      // 校验开始日期不能大于结束日期
      pickerOption0: {
        /* disabledDate: (time) => {
          if (this.searchParams.endDate !== '') {
            return time.getTime() > this.searchParams.endDate
          } else {
            return false
          }
        } */
      },
      pickerOption1: {
        /* disabledDate: (time) => {
          if (this.searchParams.startDate !== '') {
            return time.getTime() < this.searchParams.startDate
          } else {
            return false
          }
        } */
      }
    }
  },
  methods: {
    /* test () {
      const params = {
        sn8: '0EM34A2E',
        endDate: '2020-08-08',
        startDate: '2016-02-03'
      }
      // 47.106.93.196:8200
      // 101.37.158.109:8087
      // 47.96.114.255:8080
      this.$http.get('http://47.96.114.255:8080/cloud-platform/devices/device/runtime', { params })
        .then(res => {
          console.log(res)
        })
    }, */
    handleSearch () {
      this.$refs.runmode.handleSearch()
      this.$refs.menu.handleSearch()
      this.$refs.runtime.handleSearch()
    },
    setTotal (res, tar) {
      tar.tableData = res.data.list
      tar.tablePage.total = res.data.total
    }
  }
}
</script>

<style lang="scss">
  .device-data-command {
    // padding: 30px;
    // background-color: rgb(240, 242, 245);
    .sn8 {
      width: 300px;
    }
  }
</style>
